<template>
  <div class="container">
    <el-steps :active="active" align-center class="steps">
      <el-step description="进入企业应用管理" />
      <el-step description="填写Secret" />
      <el-step description="填写回调地址" />
    </el-steps>
    <AddressConfig :showSecretBox="resData.showSecretBox" :resData="resData.defaultShow" />
    <div class="btn_box">
      <el-button @click="active--" v-if="active !== 1">上一步</el-button>
      <el-button type="primary" @click="active++" v-if="active !== 3">下一步</el-button>
      <el-button type="primary" @click="accomplish" v-else>完成配置</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, watch } from 'vue'
  import AddressConfig from './components/AddressConfig.vue'
  import { channelConfigInfo } from '@/api/channel/authconfig'
  import router from '@/router'
  const active = ref(1)
  const AddressConfigRef: any = ref(null)
  const resData: any = ref({
    defaultShow: [],
    showSecretBox: true,
    one: [
      {
        id: 1,
        title: '一、进入企业应用管理',
        // text: '从企业微信官网进入管理后台, 扫码登录平台',
        colorTitle: true
      },
      {
        id: 2,
        title: '',
        text: '登录成功后, 在【管理工具】中找到【通讯录同步】功能模块'
      },
      {
        id: 3,
        title: '',
        text: '进入【通讯录同步】,并点击【开启API接口同步】'
      },
      {
        id: 4,
        title: '',
        text: '在【通讯录同步内】, 进行权限的编辑, 选择【开启手动编辑】',
        warning: '若没有开启【开启手动编辑】会造成只能通过API添加成员, 而不能正常手动添加',
        twoImg: 5
      }
    ],
    two: [
      {
        id: 6,
        title: '二、填写Secret',
        text: '进入【通讯录同步】功能后, 找到Secret - 点击【查看】- 点击【发送】',
        warning: '配置完成后请不要随便点击【重新获取】, 否者导致配置失败',
        twoImg: 7
      },
      {
        id: 7,
        title: '',
        text: '企业管理员将企业微信收到企业微信团队发送的Secret, 请复制Secret并粘贴填写至下方',
        isShowInput: true,
        isShowImg: true,
        isTwoImg: true,
        isImgList: [
          {
            imgId: 8,
            qw_text: '1、在企业微信聊天界面找到【企业微信团队】'
          },
          {
            imgId: 9,
            qw_text: '2、点击前往查看'
          },
          {
            imgId: 10,
            qw_text: '3、点击「复制」'
          }
        ]
      }
    ],
    three: [
      {
        id: 11,
        title: '三、填写回调地址',
        text: '点击通讯录同步中的【设置接受事件服务器】, 并由企业管理员进行操作确认',
        twoImg: 12,
        isShowInput: false,
        isShowImg: false,
        isTwoImg: false,
        isImgList: [{ imgId: '13' }, { imgId: '14' }, { imgId: '15' }]
      },
      {
        id: 16,
        isImgList: false,
        title: '',
        isShowImg: false,
        isTwoImg: true,
        isShowUrl: true,
        text: '将以下内容依次填写到页面【接受消息服务器配置】下对应的输入框中',
        warning: '请确认在企微后台填写的信息与提供的一致, 否则将无法保证通讯录的实时同步',
        url: '',
        token: '',
        EncodingAESKey: ''
      },
      {
        id: '17',
        warning: '填写完成后别忘记在企业微信后台也要点击保存哦~'
      }
    ]
  })
  watch(
    () => active.value,
    (v: number) => {
      switch (v) {
        case 1:
          resData.value.defaultShow = resData.value.one
          break
        case 2:
          resData.value.defaultShow = resData.value.two
          break
        case 3:
          resData.value.showSecretBox = false
          channelConfigInfo().then((res: any) => {
            resData.value.three[1].url = res.contact.url
            resData.value.three[1].token = res.token
            resData.value.three[1].EncodingAESKey = res.aeskey
            resData.value.defaultShow = resData.value.three
          })
          break
      }
    },
    { immediate: true }
  )
  const accomplish = () => {
    router.push({ path: '/channelconfig/qywechat/authconfig' })
  }
  // let resData = ref([
  //   {
  //     id: 1,
  //     title: '一、进入企业应用管理',
  //     // text: '从企业微信官网进入管理后台, 扫码登录平台',
  //     colorTitle: true
  //   },
  //   {
  //     id: 2,
  //     title: '',
  //     text: '登录成功后, 在【管理工具】中找到【通讯录同步】功能模块'
  //   },
  //   {
  //     id: 3,
  //     title: '',
  //     text: '进入【通讯录同步】,并点击【开启API接口同步】'
  //   },
  //   {
  //     id: 4,
  //     title: '',
  //     text: '在【通讯录同步内】, 进行权限的编辑, 选择【开启手动编辑】',
  //     warning: '若没有开启【开启手动编辑】会造成只能通过API添加成员, 而不能正常手动添加',
  //     twoImg: 5
  //   }
  // ])

  // const secondData = reactive([
  //   {
  //     id: 6,
  //     title: '二、填写Secret',
  //     text: '进入【通讯录同步】功能后, 找到Secret - 点击【查看】- 点击【发送】',
  //     warning: '配置完成后请不要随便点击【重新获取】, 否者导致配置失败',
  //     twoImg: 7
  //   },
  //   {
  //     id: 7,
  //     title: '',
  //     text: '企业管理员将企业微信收到企业微信团队发送的Secret, 请复制Secret并粘贴填写至下方',
  //     isShowInput: true,
  //     isShowImg: true,
  //     isTwoImg: true,
  //     isImgList: [
  //       {
  //         imgId: 8,
  //         qw_text: '1、在企业微信聊天界面找到【企业微信团队】'
  //       },
  //       {
  //         imgId: 9,
  //         qw_text: '2、点击前往查看'
  //       },
  //       {
  //         imgId: 10,
  //         qw_text: '3、点击「复制」'
  //       }
  //     ]
  //   }
  // ])

  // const thirdData = reactive([
  //   {
  //     id: 11,
  //     title: '三、填写回调地址',
  //     text: '点击通讯录同步中的【设置接受事件服务器】, 并由企业管理员进行操作确认',
  //     twoImg: 12,
  //     isShowInput: false,
  //     isShowImg: false,
  //     isTwoImg: false,
  //     isImgList: [{ imgId: '13' }, { imgId: '14' }, { imgId: '15' }]
  //   },
  //   {
  //     id: 16,
  //     isImgList: false,
  //     title: '',
  //     isShowImg: false,
  //     isTwoImg: true,
  //     isShowUrl: true,
  //     text: '将以下内容依次填写到页面【接受消息服务器配置】下对应的输入框中',
  //     warning: '请确认在企微后台填写的信息与提供的一致, 否则将无法保证通讯录的实时同步',
  //     url: '',
  //     token: '',
  //     EncodingAESKey: ''
  //   },
  //   {
  //     id: '17',
  //     warning: '填写完成后别忘记在企业微信后台也要点击保存哦~'
  //   }
  // ])
  // const next = () => {
  //   if (active.value++ > 3) active.value = 0
  // }
  // const accomplish = () => {
  //   // router.push({ path: '/channelconfig/qywechat/authconfig' })
  //   window.close()
  // }

  // watch(
  //   () => active.value,
  //   (nVal: any, oVal: any) => {
  //     switch (nVal) {
  //       case 1:
  //         break
  //       case 2:
  //         resData.value = secondData
  //         break
  //       case 3:
  //         channelConfigInfo().then((res: any) => {
  //           thirdData[1].url = res.contact.url
  //           thirdData[1].token = res.token
  //           thirdData[1].EncodingAESKey = res.aeskey
  //           resData.value = thirdData
  //         })
  //         break
  //     }
  //   },
  //   { deep: true }
  // )
</script>

<style lang="scss" scoped>
  .container {
    width: 700px;
    margin: 0 auto;
    padding: 30px 0;

    .steps {
      margin-left: -10%;
    }

    .btn_box {
      text-align: center;
    }

    :deep .el-step__head.is-process {
      // border-color:
      border-color: var(--el-text-color-placeholder);
      color: var(--el-text-color-placeholder);
    }

    :deep .el-step__description.is-process {
      color: var(--el-text-color-placeholder);
    }

    :deep .el-step.is-center .el-step__description {
      font-size: 16px;
    }
  }
</style>

<style lang="scss">
  .steps {
    .el-step__head {
      margin-bottom: 20px;
    }
  }
</style>
